<template>
    <div class="player">
        <div class="player-tit">
            <p>标题</p>
        </div>
        <div class="player-container">
            <video ref="player" width="100%" height="100%"
            preload="auto"  x-webkit-airplay="allow" :controls="false"
            :poster="poster" :src="src" :playOrPause="playOrPause" @click="pauseVideo" @timeupdate="ontimeupdate"
            @ended="onPlayerEnded($event)"></video>
        </div>
        <div class="progress">
            <el-slider  :value ="videoProgress" @input="setProgress" @change="setVideoCurrentTime" :format-tooltip="formatSliderTip" :show-tooltip="false"></el-slider>
        </div>
        <div class="player-tools">
            <div class="left">
                <div v-if="!playOrPause" class="item play" @click="play">
                    <i class="fa fa-play csp"></i>
                </div>
                <div v-else class="item play" @click="pause">
                    <i class="fa fa-pause csp"></i>
                </div>
                <div class="time">
                    <span>{{showProgressTime}}</span>
                </div>
            </div>
            <div class="right">
                <div class="placeholder"></div>
                <div class="volume" @mouseout="showSetVolume = false">
                    <div v-if="!isMute" class="csp volume-btn" @click="defaultMuted" @mouseover="showSetVolume = true">
                        <i v-if="voice >= 80" class="fa fa-volume-up"></i>
                        <i v-else-if="voice > 30 && voice < 80" class="fa fa-volume-down"></i>
                        <i v-else class="fa fa-volume-off"></i>
                    </div>
                    <div v-else class="csp volume-btn" @click="defaultMuted">
                        <i class="fa fa-microphone-slash"></i>
                    </div>
                    <div v-if="showSetVolume" @mouseover="showSetVolume = true" class="slider">
                        <el-slider  v-model="voice" vertical @change="setVoice"></el-slider>
                    </div>
                </div>
                <div>
                    <span class="fa fa-arrows-alt csp" @click="fullScreen"></span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import func from './func'
export default {
    props:['src','poster'],
    data(){
        return {
            playOrPause: false,
            voice: 50,
            isMute: false,

            showSetVolume: false,
            showProgressTime: '',
            duration: 0,
            currentTime: 0,

            firstLoadVideo: true
        }
    },
    created(){
        // console.log(document.querySelector('video'))
    },
    computed:{
        videoProgress(){
            return (this.currentTime / this.duration) * 100
            // if(this.currentTime && this.duration) {
            //     return (this.currentTime / this.duration) * 100
            // }else{
            //     return 0
            // }
        }
    },
    watch:{
        
    },
    mounted(){
        var that = this

        that.onLoad()
        document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0]

            // console.log(e.keyCode)
            if(e && (e.keyCode+'').includes(['32','37','38','39','40']) == 0){
                that.keyCodeEvent(e.keyCode)
            }
        }
    },
    methods:{
        getVideoObj(){
            return document.querySelector('video')
        },
        onLoad(){
            let that = this

            that.setVoice(this.voice)
            let video = that.getVideoObj()
            video.oncanplay = () => {
                that.duration = Math.ceil(video.duration)
                if(that.firstLoadVideo) {
                    that.showProgressTime = '00:00 / ' + func.getVideoLength(video.duration)
                }
                that.firstLoadVideo = false
            }
        },
        keyCodeEvent(keyCode){
            if(keyCode === 37){
                // this.$message('left')
                this.currentTime = this.currentTime - 5
                this.getVideoObj().currentTime = this.currentTime
            }else if(keyCode === 39){
                // this.$message('right')
                // todo 当处于极限值时报错
                this.currentTime = this.currentTime + 5
                this.getVideoObj().currentTime = this.currentTime
            }else if(keyCode === 38){
                //
                this.$message('top')
            }else if(keyCode === 40){
                //
                this.$message('down')
            }else if(keyCode === 32){
                this.pauseVideo()
            }else {
                //
            }
        },
        play(event){
            this.getVideoObj().play()
            // console.log(this.$refs.player)
            this.playOrPause = true
        },
        pause(e){
            let video = this.getVideoObj().pause()
            this.playOrPause = false
        },
        pauseVideo(){
            let video = this.getVideoObj()
            if (this.playOrPause) {
                video.pause()
            } else {
                video.play()
            }
            this.playOrPause = !this.playOrPause
        },
        defaultMuted(){
            this.getVideoObj().muted = !this.isMute            
            this.isMute = !this.isMute
        },
        ontimeupdate(time){
            this.currentTime = time.target.currentTime

            this.showProgressTime = func.getVideoLength(this.currentTime) + ' / ' + func.getVideoLength(this.duration)
        },
        formatSliderTip(val){
            return func.getVideoLength(this.currentTime)
        },
        setVideoCurrentTime(val){
            var time = Math.floor((this.duration / 100) * val)

            this.getVideoObj().currentTime = time
            this.currentTime = time
            
        },
        setProgress(val){
            let time = func.setVideoLength(val,this.duration)
            // this.getVideoObj().currentTime = time
            this.currentTime = time
        },
        setVoice(val){
            let video = this.getVideoObj()
            video.volume = val / 100
        },
        fullScreen(){
            let video = this.getVideoObj()
            func.launchFullscreen(video)
        },
        onPlayerEnded(){},
        
    }
}
</script>